<template>
  <!-- <el-form :label-width="labelWidth" :size="size" :model="queryParams" :ref="queryForm" size="small" :inline="true" v-show="showSearch" > -->
  <div>
    <el-col :span="20">
      <el-form ref="queryForm" :label-width="labelWidth" :size="size" :model="queryParams">
        <div id="searchFilter" :gutter="10" style="display: flex; flex-wrap: wrap">
            <slot></slot>
            <el-form-item ></el-form-item>
        </div>
      </el-form>
    </el-col>
    <el-col :span="4" class="search_reset" align="right">
      <el-button v-show="collapseAble" type="text" @click="shiftCollapseAble">
        {{ fold ? '更多筛选' : '收起筛选' }}
      </el-button>
      <el-button type="success" @click="handleQuery" size="mini">查询</el-button>
      <el-button @click="handleReset" size="mini">重置</el-button>
    </el-col>
  </div>
</template>
<script>
export default {
  name: 'SearchFilter',
  props: {
    // 最大展示数，默认3个，超过则隐藏，为0时不限制
    maxShow: {
      type: Number,
      default: 4,
    },
    labelWidth: {
      type: String,
      default: '100px',
    },
    size: {
      type: String,
      default: 'small',
    },
    queryParams:{
      type: Object,
    },
  },
  data() {
    return {
      collapseAble: false,
      fold: false,
    }
  },
  created() {
    this.$emit('queryForm')
  },
  mounted() {
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowControl()
    }
  },
  methods: {
    shiftCollapseAble() {
      this.fold = !this.fold
      this.minShowControl()
    },
    // 通过maxShow控制元素显示/折叠
    minShowControl() {
      const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
      const len = group?.length ? group?.length - 1 : 0
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold
          }
        })
        this.collapseAble = true
      } else {
        this.collapseAble = false
      }
    },
    handleQuery() {
      this.$emit('search')
    },
    handleReset() {
      this.$emit('reset')
    },
  },
}
</script>
<style lang="scss" scoped >
//   .el-button--text {
//     border-color: transparent;
//     color: #67C23A;
//     background: transparent;
//     padding-left: 0;
//     padding-right: 0;
// }
</style>

